<template>
    <div class=''>
        详情页
        <childView />
        <!-- 什么是计算属性 -->
        <input type="text" v-model="firstName">
        <input type="text" v-model="lastName">
        <span>{{ fullName }}</span>
    </div>
</template>

<script>
import childView from '@/components/childView.vue';
export default {
    data() {
        return {
            firstName: "jack",
            lastName: "chen",
            fullName: "jack - chen"
        };
    },
    components: {
        childView
    },
    created() {

    },
    computed: {
        // 计算属性的名称  当计算属性中任何一个data属性发生变化之后都会重新触发计算属性，更新fullName
        // fullName: function () {
        //     // 计算属性的逻辑处理
        //     // 返回计算结果
        //     return this.firstName + this.lastName
        // }
    },
    watch: {
        //   监听在数据发生变化的适合，执行一些操作或者触发其他逻辑，它可以用来响应数据的变化并进行相对应的处理，
        // 在watch对象中，可以监听多个属性，每一个属性对应一共回调函数，
        // 当被监听的属性发生改变的适合，vue会自动调用对应的回调函数，并且传递新值和旧值进行参考
        firstName: {
            handler(newVal, oldVal) {
                console.log(newVal);
                console.log(oldVal);
                this.fullName = newVal + "-" + this.lastName
            }
        },
        lastName: {
            handler(newVal, oldVal) {
                console.log(newVal);
                console.log(oldVal);
                this.fullName = this.firstName + "-" + newVal
            }
        }
    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style lang='scss' scoped></style>